<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>    
<%@include file="../common/common.jsp"%>  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新品推荐</title>
		
	<script type="text/javascript">
		$(function(){
			//初始化、默认加载第一个
			findMoreHotSale('10','1');
		});
		/**点击更多上新产品****/
		function findMoreHotSale(classId,currPage){
			$.ajax({
   					url : "${ctx}/goods/queryGoodsByClassIdList.do",
   					type : "post",
   					//	dataType : 'json',
   					data : {"classId":classId,"currPage":currPage},
   					async : false,
   					success : function(data, status) {
   						var resultList = data.resultList; //获取返回的集合数据
   						var totalRecords = data.totalRecords; //获取list总数
   						var currentPage = data.currentPage; //获取当前页数
   						$("#paging").val(currentPage);
   						$("#class_id").val(classId);
   						
   						if(classId!=null && classId=='10'){
   							$("#findMoreHotSale10").addClass("selected");
   							$("#findMoreHotSale11").removeClass("selected");
   							$("#findMoreHotSale12").removeClass("selected");
   						}
   						if(classId!=null && classId=='11'){
   							$("#findMoreHotSale10").removeClass("selected");
   							$("#findMoreHotSale11").addClass("selected");
   							$("#findMoreHotSale12").removeClass("selected");
   						
   						}
   						if(classId!=null && classId=='12'){
   							$("#findMoreHotSale10").removeClass("selected");
   							$("#findMoreHotSale11").removeClass("selected");
   							$("#findMoreHotSale12").addClass("selected");
   						
   						}
   						optionHtml(resultList);
	   				},
	   				error : function(xhr, status, e) {
	   					alert("失败错误信息"+e)
	   				}
        	 });
		}
		
		/*******/
		function optionHtml(data){
			var html = "";
			//移除已有的标签元素数据
			$("#moreHotSale li").remove();
			//遍历结果信息
			$.each(data, function(i,result){      
				html+= "<li> "
					+"    <a href='${ctx}/goods/queryGoodsDetail?id="+result.id+"' target='_blank'> "
					var picture = result.picture;
					if(picture!=null){
						html+=" <img src='${baseFile}"+picture+"' style='height: 178px;width: 178px;' alt='' />"
					}else{
						html+=" <img src='${ctx}/images/more1.png' alt='' />"
					}
					html+="    </a> "
					+"   <p class='desc'>"+result.name+"</p> "
					+"   <p class='sales' style='color:#CF2024;height:10px;'>"+result.proTitle+"</p>"
					+"   <p class='price'>￥"+result.marketPrice+" "
					+"  	 <span class='r' style='color:#333;font-size:14px;'>月销"+ result.monthSaleMount+"笔</span>"
					+"	 </p> "
					+" </li>";
			});
			$("#moreHotSale").append(html);
		}
		
		/***换一批，分页***/
		function onPage(){
			var currPage =$("#paging").val();
			var class_id = $("#class_id").val();
			findMoreHotSale(class_id,(currPage*1)+(1*1));
		}
		
		</script>
	</head>
	<body>
		<!--头部  -->
		<%@include file="../common/header.jsp"%>
		<div class="same home container clearfix">
			<!-- 引入购物车文件    标签开始 -->
			<%@ include file="../common/top.jsp"%>
			<!-- 引入购物车文件    标签结束 -->
			
				<!-- 顶部文件引入  结束-->
			<!--页面导航栏 与商品分类展示   开始  -->
			<div class="nav f16">
				<!--商品列表-->
				<!-- <div class="all_pro l f14 three">
					<p class="all f18">全部商品</p>
				</div> -->
				<!-- 引入 导航栏的信息  开始 -->
				<%@ include file="../common/nav.jsp"%>
				<!-- 引入 导航栏的信息  结束 -->
			</div>
			<!--页面商品分类展示  结束  -->
			
			<div class="banner">
				<div id="shuffling">
					<input id="type" type="hidden" value="2"/> 
					<div id="list" style="left: -1100px;">
			            <%-- <img src="${ctx }/images/banner3.png" alt="1"/>
			            <img src="${ctx }/images/banner4.png" alt="2"/>
			            <img src="${ctx }/images/banner.png" alt="3"/>
			            <img src="${ctx }/images/banner2.png" alt="4"/>		
			            <img src="${ctx }/images/banner3.png" alt="1"/> --%>
		        	</div>
		        	<div id="buttons">
			            <!-- <span index="1" class="on"></span>
			            <span index="2"></span>
			            <span index="3"></span>
			            <span index="4"></span> -->
		        	</div>
			        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
			        <a href="javascript:;" id="next" class="arrow">&gt;</a>
				</div>
			</div>
			
			<div class="new_prolist clearfix">
				<p class="title">新品推荐 <span>NEW</span></p>
				<ul>
					<c:forEach items="${resultList}" var="goods">
						<li>
							<a href="${ctx}/goods/queryGoodsDetail?id=${goods.id}" target="_blank">
								<c:if test="${goods.picture==null}">
									<img src="${ctx}/images/new1.png" alt="" />
								</c:if>
								<c:if test="${goods.picture!=null }">
									<img src="${baseFile}${goods.picture}" alt="白色碎花欧根纱" />
								</c:if>
							</a>
							<p class="desc">${goods.name }</p>
							<p class='sales' style='color:#CF2024;height:10px;'>${goods.proTitle }</p>
                              <br/>
							<p class="price">￥${goods.marketPrice}
								<span class="r" style="color:#333;font-size:14px;">月销 ${goods.monthSaleMount } 笔</span>
							</p>
						</li>
					</c:forEach>
				</ul>
			</div>
			
			
			
			
			<div class="week clearfix">
				<p class="title">本周上新 <span>WEEK</span></p>
				<ul class="clearfix">
					<c:forEach items="${GoodsWeekList}" var="goods">
						<li>
							<a href="${ctx}/goods/queryGoodsDetail?id=${goods.id}" target="_blank">
								<!-- jstl分割字符串 -->
								<c:set value="${fn:split(goods.imageFile, ';')}" var="img"></c:set>
								
								<c:if test="${goods.picture==null}">
									<img src="${ctx}/images/new6.png" alt="" />
								</c:if>
								<c:if test="${goods.picture!=null }">
									<img src="${baseFile}${goods.picture}" alt="白色碎花欧根纱" />
								</c:if>
							</a>
							<p class="price">￥${goods.marketPrice}</p>
							<p class="desc">${goods.name}</p>
						</li>
					</c:forEach>
				</ul>
			</div>
			
			
			<!-- 更多上新    开始 -->
			<div class="more clearfix">
				<p class="title">更多上新 <span>MORE</span></p>
				<div>
					<a href="javascript:void(0);" id="findMoreHotSale10" onclick="findMoreHotSale('10','1');" class="selected">幼儿类</a>
					<a href="javascript:void(0);" id="findMoreHotSale11" onclick="findMoreHotSale('11','1');">车具类</a>
					<a href="javascript:void(0);" id="findMoreHotSale12" onclick="findMoreHotSale('12','1');">传统娃娃</a>
					
					
					<span onclick="onPage();" class="r change">换一批</span>
					
					<!-- <a href="">美食</a>
					<a href="">超市</a>
					<a href="">生活</a>
					<a href="">鞋子</a> -->
				</div>
				<!-- 更多热销产品   开始 -->
				<ul class="clearfix" id="moreHotSale">
				
				</ul>
				
				<input type="hidden" name="paging" id="paging" value="">
				<input type="hidden" name="class_id" id="class_id" value="">
				<!-- 更多热销产品   结束 -->
			</div>
			<!-- 更多上新    结束 -->
		</div>
		
		
			
		
		
	<!-- 	<div class="recent_news container clearfix">
			<ul>
				<li class="dynamic">
					<p class="f18">最新动态</p>
					<div class="wrap">
						<div>
							<a href="news.html">
								<img src="images/dt1.png" alt="" />
								<p>韩都衣舍携手章子怡出资打造彩妆品牌...</p>
							</a>
							<a href="news.html" class="middle">
								<img src="images/dt2.png" alt="" />
								<p>韩都衣舍携手章子怡出资打造彩妆品牌...</p>
							</a>
							<a href="news.html">
								<img src="images/dt3.png" alt="" />
								<p>韩都衣舍携手章子怡出资打造彩妆品牌...</p>
							</a>
						</div>
						<hr />
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
					</div>
				</li>
				<li class="answer">
					<p class="f18">推荐问答</p>
					<div class="wrap">
						<form action="" class="clearfix">
							<input type="text" placeholder="简单描述你的问题"/>
							<button>找答案</button>
							<a href="">去提问</a>
						</form>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						
					</div>
				</li>
				<li class="info clearfix">
					<p class="f18">热门资讯</p>
					<div class="wrap">
						<div class="clearfix">
							<a href="">
								<img src="images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
						<div class="clearfix">
							<a href="">
								<img src="images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
						<div class="clearfix">
							<a href="">
								<img src="images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
						<div class="clearfix">
							<a href="">
								<img src="images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
					</div>
				</li>
				
				
				
			</ul>
			
		</div> -->
		<!-- 引入底部的页面  开始-->
		<%@include file="../common/bottom.jsp"%>
		<!-- 引入底部的页面  结束-->
		<!-- <script src="js/jquery-2.0.2.js"></script>
		<script src="js/shuffle.js"></script> -->
		<script src="${ctx}/js/shuffle.js"></script>
	</body>

</html>

